<template>
  <div class="div">
    <div class="shopBody">
      <div class="menuList">
        <ul>
          <li v-for="(cl,i) in cls" :key="i" class="Ali" @click="Aclick(i)">
            <a>{{cl.name}}</a>
          </li>
        </ul>
      </div>
      <div class="detailed">
        <ul v-for="(cl,i) in cls" :key="i">
          <li>
            <!--用下标 i 给标题div加上标识,实现左边到导航条点击时右边类容跳转到对应位置-->
            <div class="head" :id="'body'+i">
              <strong>{{cl.name}}</strong>
            </div>
            <div v-for="(list,index) in cl.foods" :key="index">
              <shop-goods @addNum="addNum" @romNum="romNum" :list="list" ref="goods" />
            </div>
          </li>
        </ul>
      </div>
    </div>
    <transition>
      <shop-cart v-if="aaa" @addNum="addNum" @romNum="romNum" />
    </transition>
    <section>
      <div :class="shopping" @click="showCart(num)">
        <span class="badges">{{num}}</span>
        <span class="iconfont icon-icon-test4"></span>
      </div>
      <div class="price">
        <div>￥{{money}}</div>
        <div>配送费:5￥</div>
      </div>
      <div :class="zf" @click="empty">
        <span v-text="song"></span>
      </div>
    </section>
  </div>
</template>

<script>
import shopGoods from './shopGoods'
import shopCart from './shopCart'
import { MessageBox } from 'mint-ui'
export default {
  components: {
    shopGoods,
    shopCart
  },
  props: [
    'cls' //商品Array
  ],
  data() {
    return {
      money: 0,
      shopping: ['shoppingOne'],
      num: 0,
      song: '还差20￥起送',
      aaa: false,
      zf: '',
      mask: null
    }
  },
  methods: {
    Aclick(i) {
      // 实在想不出用vue怎么写,被迫使用原生js
      let ali = document.getElementsByClassName('Ali')
      ali.forEach(li => {
        //把所有的li变回原色
        li.style.backgroundColor = '#f5f5f5'
        li.style.borderLeft = 'none'
      })
      ali[i].style.backgroundColor = 'white' //给被点击的li添样式
      ali[i].style.borderLeft = '0.15rem solid #3190e8'
      let body = document.getElementById('body' + i) //获取要跳转的body区域
      body.scrollIntoView({ behavior: 'smooth' })
    },
    showCart(num) {
      if (num != 0) {
        this.aaa = !this.aaa
        if (this.aaa) {
          this.mask.show()
        } else {
          this.mask.close()
        }
      }
    },
    newData() {
      //跟新页面数据
      this.money = 0
      this.num = 0
      let shopRecord = JSON.parse(localStorage.getItem(this.$route.query.id))
      //遍历所有的key,把每个值全部取出来
      //算出总金额和数量添加到数据中
      for (var key in shopRecord) {
        //window.console.log(key)
        this.num += shopRecord[key]['num']
        this.money += shopRecord[key]['money']
      }
      //如果数量归零了,就把这个数据删掉,并把相关样式取消掉
      if (this.num == 0) {
        localStorage.removeItem(this.$route.query.id)
        this.aaa = false
        if (this.mask) {
          this.mask.close()
        }

        if (this.shopping.length > 1) {
          this.shopping.pop()
        }
      } else {
        if (this.shopping.length == 1) {
          this.shopping.push('shoppingTwo')
        }
      }
      if (this.money >= 20) {
        this.song = '去结算'
        this.zf = 'col'
      } else {
        this.song = '还差' + (20 - this.money) + '￥起送'
        this.zf = ''
      }
    },
    addNum(item_id, num, money, name) {
      //商品增加
      let shopRecord = JSON.parse(localStorage.getItem(this.$route.query.id))
      //判断shopRecord时候为null
      //部为空则给他添加一个对象,键为商品名,值为包含商品数量和所需金额的对象
      //为空则让shopRecord等于一个对象,
      if (shopRecord) {
        shopRecord[item_id] = { num, money, name }
      } else {
        shopRecord = { [item_id]: { num, money, name } }
      }
      //window.console.log(shopRecord)
      localStorage.setItem(this.$route.query.id, JSON.stringify(shopRecord))
      this.newData()
      this.$refs.goods.forEach(Obj => {
        Obj.newData()
      })
    },
    romNum(item_id, num, money, name) {
      //减少
      //取出缓存中的数据,把当前数据同步进去,
      let shopRecord = JSON.parse(localStorage.getItem(this.$route.query.id))
      //数量不等于零时,数据同步到缓存中
      if (num != 0) {
        shopRecord[item_id] = { num, money, name }
      } else {
        delete shopRecord[item_id]
      }
      localStorage.setItem(this.$route.query.id, JSON.stringify(shopRecord))

      this.newData()
      this.$refs.goods.forEach(Obj => {
        Obj.newData()
      })
    },
    empty() {
      if (this.money >= 20) {
        MessageBox('提示', '请在手机APP进行该操作')
      }
    }
  },
  created() {
    import('lib/mui/js/mui').then(data => {
      this.mask = data.createMask(() => {
        this.aaa = false
      })
      this.newData()
    })
  },
  beforeDestroy() {
    //退出页面时，关闭遮罩层
    this.mask.close()
  }
}
</script>
<style  scoped>
ul {
  padding: 0;
  margin: 0;
  list-style: none;
  font-style: normal;
  text-decoration: none;
  border: none;
  color: #333;
  font-weight: normal;
  font-family: 'Microsoft Yahei';
  box-sizing: border-box;
}
li {
  padding: 0.7rem 0.3rem;
  border-bottom: 0.025rem solid #ededed;
  box-sizing: border-box;
  position: relative;
  font-size: 0.7rem;
}
.menuList {
  background-color: #f5f5f5;
  flex: 1;
  overflow-y: scroll;
}
.menuList li:first-child {
  background-color: white;
  border-left: 0.15rem solid #3190e8;
}
.detailed {
  height: 100%;
  flex: 3;
  overflow-y: scroll;
}
.shopBody {
  display: flex;
  position: absolute;
  width: 100%;
  top: 6.6rem;
  bottom: 40px;
  left: 0px;
}
section {
  position: fixed;
  height: 40px;
  width: 100%;
  background-color: #333;
  bottom: 0px;
  z-index: 1000;
}
.shoppingOne {
  display: flex;
  height: 3rem;
  width: 3rem;
  border-radius: 50%;
  border: 0.18rem solid #444;
  background-color: #3d3d3f;
  position: absolute;
  padding: 0.4rem;
  left: 0.5rem;
  top: -0.9rem;
}
.shoppingTwo {
  background-color: #26a2ff !important;
}
.badges {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  background-color: #ff461d;
  line-height: 0.7rem;
  text-align: center;
  border-radius: 50%;
  border: 0.025rem solid#ff461d;
  min-width: 0.8rem;
  height: 0.8rem;
  font-size: 0.6rem;
  color: #fff;
  font-family: Helvetica Neue, Tahoma, Arial;
}
.price {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 4rem;
  color: white;
}
.price > div:first-child {
  font-size: 1rem;
  font-weight: bold;
}
.price > div:last-child {
  font-size: 0.5rem;
}
section > div:last-child {
  position: absolute;
  right: 0;
  background-color: #535356;
  width: 5rem;
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
section > div:last-child > span {
  font-size: 0.7rem;
  color: #fff;
  font-weight: bold;
}
.head {
  width: 100%;
  padding: 0.4rem;
  position: relative;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}
strong {
  font-size: 0.9rem;
  color: #666;
  font-weight: bold;
}
li > div > span {
  font-size: 0.6rem;
  color: #999;
  width: 30%;
  overflow: hidden;
  margin-left: 0.3rem;
}

p {
  margin: 0;
  padding: 0;
}
a {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
}
.v-enter,
.v-leave-to {
  transform: translateY(100%);
}
.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}
.col {
  background-color: #4cd964 !important;
}
.icon-icon-test4 {
  font-size: 2rem;
  position: absolute;
  top: 0;
}
.shoppingTwo > .icon-icon-test4 {
  color: white;
}
</style>